<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="beforeSearch()">
            <div class="search-item">
                <label>学科：</label>
                <div class="table-query-input">
                    <el-cascader
                        ref="classification"
                        :key="zeroOne"
                        v-model="queryData.classificationId"
                        :props="classificationProps"
                        :show-all-levels="false"
                        filterable
                        clearable
                    ></el-cascader>
                </div>
                <label>栏目名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        class="test"
                        clearable
                        placeholder="栏目名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="beforeSearch()"
                    >搜索</el-button
                >
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                icon="el-icon-plus"
                style="margin-bottom: 2em"
                @click="go(`column-add`)"
                >添加栏目
            </el-button>
            <el-button
                type="danger"
                icon="el-icon-delete"
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="
                    tableDelete(
                        '/exam/column/deleted-list',
                        {
                            ids: ids
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                :highlight-current-row="true"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    min-width="55"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="classificationName"
                    label="科目"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="sort"
                    label="排序"
                    width="200"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="200"
                    align="center"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <k-tag :tag="columnType[scope.row.type]"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="类型"
                    width="200"
                    align="center"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <div>
                            <p v-if="scope.row.isFree">【免费】</p>
                            <p v-else>【收费】</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="300"
                    align="center"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="go('column-add?id=' + scope.row.id)"
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/column/deleted-list',
                                    {
                                        ids: [scope.row.id]
                                    },
                                    true
                                )
                            "
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree, beanCopy } from "@/utils/index.js";
import { get, put, post } from "@/api/request";
import {
    fetchCategoryChildren,
    fetchCategoryFirstStage,
    fetchClassificationChildren,
    fetchClassificationFirst
} from "@/api/course";
export default {
    name: "ColumnIndex",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            ccc: null,
            zeroOne: 0,
            category: 1,
            queryData: {
                classificationId: null,
                name: null
            },
            ids: [],
            categoryProps: {
                lazy: true,
                checkStrictly: false,
                lazyLoad: this.fetchCategory
            },
            classificationProps: {
                emitPath: false,
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.fetchClassification
            }
        };
    },
    computed: {
        ...mapState({
            columnType: state => state.status.columnType
        })
    },
    mounted() {},
    methods: {
        beforeSearch() {
            if (this.$refs.classification.getCheckedNodes().length > 0) {
                this.queryData.classificationId = this.$refs.classification.getCheckedNodes()[0].value;
            }
            this.search();
        },
        clearQuery() {
            (this.queryData = {}), this.search();
        },
        search(queryData) {
            this.loadTable("/exam/column/page", queryData);
        },
        handleSelectionChange(val) {
            this.ids = [];
            const length = val.length;
            for (let n = 0; n < length; n++) {
                this.ids.push(val[n].id);
            }
        },
        fetchCategory(node, resolve) {
            const { level } = node;
            if (!node.data) {
                fetchCategoryFirstStage().then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf: level >= (item.children.length > 0 ? 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            } else {
                fetchCategoryChildren({ id: node.data.value }).then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf:
                                level >=
                                (item.children.length > 0 ? level + 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            }
        },
        fetchClassification(node, resolve) {
            const { level } = node;
            if (!node.data) {
                fetchClassificationFirst().then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf: level >= (item.children.length > 0 ? 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            } else {
                fetchClassificationChildren({ id: node.data.value }).then(
                    res => {
                        const nodes = Array.from(res).map(item => {
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >=
                                    (item.children.length > 0 ? level + 1 : 0)
                            };
                        });
                        resolve(nodes);
                    }
                );
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.test {
    width: 75%;
}
</style>
